<template>
  <a-card :bordered="false" class="br-10">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="角色名称">
          <a-input placeholder="请输入" v-model="queryParam.roleName" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model="queryParam.status">
            <a-select-option :value="''">全部</a-select-option>
            <a-select-option :value="0">正常</a-select-option>
            <a-select-option :value="1">禁用</a-select-option>
          </a-select>
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="() => (queryParam = { status: '' })">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button v-has="'system:role:add'" type="primary" @click="$refs.modal.add()">新建</a-button>
    </div>
    <s-table size="default" ref="table" rowKey="roleId" :columns="columns" :data="loadData" :rowSelection="null">
      <span slot="sysType" slot-scope="text, record">{{ record.sysType.sysDesc }}</span>
      <span slot="status" slot-scope="text, record">
        <a-switch
          :disabled="!statusEnable || record.roleKey === 'admin'"
          :checked="record.status == 0"
          @change="onChangeStatus(record)"
        />
      </span>
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" ghost size="small" class="_mr-5" @click="handleView(record)">
          查看
        </a-button>
        <a-button
          v-has="'system:role:edit'"
          v-if="record.edit"
          type="primary"
          ghost
          size="small"
          class="_mr-5"
          @click="handleEdit(record)"
        >
          编辑
        </a-button>
        <a-button
          v-has="'system:role:remove'"
          v-if="record.roleKey !== 'admin'"
          type="primary"
          ghost
          size="small"
          class="_mr-5"
          @click="delByIds([record.roleId])"
        >
          删除
        </a-button>
      </span>
    </s-table>
    <role-modal ref="modal" @ok="handleOk" />
    <role-modal-view ref="modalView" />
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { getRole4AdminList, delRole, changRoleStatus } from '@/api/system/system'
import RoleModal from './modules/RoleModal.vue'
import RoleModalView from '@/views/system/modules/RoleModalView'
import pick from 'lodash.pick'
import { checkPermission } from '@/utils/authority'
export default {
  name: 'TableList',
  components: {
    STable,
    RoleModal,
    RoleModalView
  },
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      mdl: {},
      permissions: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: { status: '' },
      // 表头
      columns: [
        // {
        //   title: '角色编号',
        //   dataIndex: 'roleId'
        // },
        {
          title: '角色名称',
          dataIndex: 'roleName'
        },
        /* {
          title: '显示顺序',
          dataIndex: 'roleSort'
        }, */
        // {
        //   title: '应用范围',
        //   dataIndex: 'sysType',
        //   scopedSlots: { customRender: 'sysType' }
        // },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          sorter: true
        },
        {
          title: '操作',
          width: '200px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getRole4AdminList(Object.assign(parameter, this.queryParam))
      },
      selectedRowKeys: [],
      selectedRows: [],
      statusEnable: checkPermission('system:role:status')
    }
  },
  created() {},
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    handleAdd(parentId) {
      this.$refs.modal.add(parentId)
    },
    handleEdit(record) {
      this.$refs.modal.edit(record)
    },
    handleView(record) {
      this.$refs.modalView.view(record)
    },
    onChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleOk() {
      this.$refs.table.refresh(true)
      console.log('handleSaveOk')
    },
    delByIds(ids) {
      var _this = this
      this.$confirm({
        title: '角色删除?',
        content: '是否确定删除该角色?',
        onOk() {
          delRole({ ids: ids.join(',') }).then(res => {
            if (res.code === 0) {
              _this.$message.success(`删除成功`)
              _this.handleOk()
            } else {
              _this.$message.error(res.msg)
            }
            // const difference = new Set(this.selectedRowKeys.filter(x => !new Set(ids).has(x)))
            // this.selectedRowKeys = Array.from(difference)
            this.selectedRowKeys = []
          })
        },
        onCancel() {}
      })
    },
    onChangeStatus(record) {
      var _this = this
      this.$confirm({
        title: '更改角色状态',
        content: '是否确定更改该角色状态?',
        onOk() {
          record.status = record.status === '0' ? '1' : '0'
          changRoleStatus(pick(record, 'roleId', 'status'))
            // 发送状态到服务器
            .then(res => {
              if (res.code === 0) {
                _this.$message.success('保存成功')
              } else {
                _this.$message.error(res.msg)
              }
            })
        },
        onCancel() {
          return false
        }
      })
      console.log(record.status)
    }
  }
}
</script>
